<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<!--默认插槽只能有一个，当需要多个插槽时，就需要具名插槽了。-->
<div id="app">
  <p-comp>
    <template slot="header">
      <div>
        <!--
            作者：offline
            时间：2021-01-26
            描述：具名插槽填充内容
        -->
        <h3>商品管理</h3>
    </template>

    商品管理内容

    <template slot="foots">
      <h6>版权声明</h6>
    </template>
  </p-comp>
</div>
<template id="pComp">
  <div>
    <!--
        作者：offline
        时间：2021-01-26
        描述：具名插槽
    -->
    <slot name="header"></slot>
    <!--
        作者：offline
        时间：2021-01-26
        描述：默认插槽
    -->
    <slot></slot>
    <!--
        作者：offline
        时间：2021-01-26
        描述：具名插槽
    -->
    <slot name="foots"></slot>
  </div>
</template>
<script>
  var vm = new Vue({
    el: "#app",
    components: {
      "p-comp": {
        template: "#pComp"
      }
    }
  })
</script>

</body>
</html>